<template>
  <div class="article-detail-container">
    <el-card v-if="article" class="article-detail-card">
      <div class="article-title">{{ article.title }}</div>
      <div class="article-meta">
        <span>作者：{{ article.userId }}</span>
        <span>分类：{{ article.categoryId }}</span>
        <span>时间：{{ article.createTime }}</span>
        <span><i class="el-icon-view"></i> {{ article.clickCount }} 次浏览</span>
      </div>
      <div class="article-content ql-editor" v-html="article.content"></div>
    </el-card>
    <el-card class="comment-section">
      <div class="comment-title">评论</div>
      <el-empty v-if="commentList.length === 0" description="暂无评论" />
      <el-timeline v-else>
        <el-timeline-item
          v-for="comment in commentList"
          :key="comment.commentId"
          :timestamp="comment.createTime"
          placement="top"
        >
          <div class="comment-user">用户：{{ comment.userId }}</div>
          <div class="comment-content">{{ comment.content }}</div>
        </el-timeline-item>
      </el-timeline>
      <el-divider />
      <el-form :model="commentForm" :rules="commentRules" ref="commentForm" label-width="0">
        <el-form-item prop="content">
          <el-input
            type="textarea"
            v-model="commentForm.content"
            placeholder="写下你的评论..."
            maxlength="500"
            show-word-limit
            rows="3"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitComment" :loading="commentLoading">发表评论</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getArticle } from '@/api/article/article'
import { listByArticleId, addComment } from '@/api/comment/comment'

export default {
  name: 'ArticleDetail',
  data() {
    return {
      article: null,
      commentList: [],
      commentForm: {
        content: ''
      },
      commentRules: {
        content: [
          { required: true, message: '评论内容不能为空', trigger: 'blur' }
        ]
      },
      commentLoading: false
    }
  },
  created() {
    this.loadDetail()
    this.loadComments()
  },
  methods: {
    async loadDetail() {
      const id = this.$route.params.articleId
      const res = await getArticle(id)
      this.article = res.data
    },
    async loadComments() {
      const id = this.$route.params.articleId
      const res = await listByArticleId(id)
      this.commentList = res.data || []
    },
    submitComment() {
      this.$refs.commentForm.validate(async valid => {
        if (!valid) return
        this.commentLoading = true
        try {
          await addComment({
            articleId: this.$route.params.articleId,
            content: this.commentForm.content
          })
          this.$message.success('评论成功')
          this.commentForm.content = ''
          this.loadComments()
        } finally {
          this.commentLoading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.article-detail-container {
  max-width: 900px;
  margin: 32px auto;
  padding: 0 12px;
}
.article-detail-card {
  margin-bottom: 32px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(64,158,255,0.08);
  background: #fff;
}
.article-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #222;
}
.article-meta {
  color: #888;
  font-size: 14px;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.article-content {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 8px;
  background: #fcfcfc;
  border-radius: 6px;
  padding: 18px 12px;
  min-height: 120px;
}
.comment-section {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(64,158,255,0.06);
  background: #fff;
  margin-bottom: 32px;
}
.comment-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #409EFF;
}
.comment-user {
  color: #409EFF;
  font-size: 14px;
  margin-bottom: 2px;
}
.comment-content {
  font-size: 15px;
  color: #333;
  background: #f7f8fa;
  border-radius: 4px;
  padding: 6px 10px;
}
</style> 